<!-- 预约列表
	单个表单显示表单详情 
	多个则显示表单列表
 -->
<template>
	<view class="reserve-content page" :class="{minH:tabTitle}" :style="{'--color': color}">
		<status-bar ref='statusbar' :title='tabTitle' :back='0'></status-bar>
		<view class="reserve_ radius boxsShadow" v-if='reserveList && reserveList.length > 1'>
			<!-- <view class="reserveTitle thmeTxt">预约中心</view> -->
			<view class="reserveList">
				<navigator :url="'/pages/reserve/formSubmit?ordId='+item.order_id" hover-class="none" v-for="(item,index) in reserveList" :key="index">
					<view class="flex-between flex-box reserveItem">
						<image class="reserveImg" @error="item.wzn_act_img = ''" :src="item.wzn_act_img?$imgUrls(item.wzn_act_img) :staticUrl+'/images/imageLoading.png'" mode="aspectFill"></image>
						<view class="flex">
							<view class="Titletxt thmeTxt lines newTitle">{{item.order_name}}</view>
							<view class="underline"></view>
							<view class="thmeInfo lines newInfo">{{item.order_startDate}} ~ {{item.order_endDate}}</view>
							<view class="thmeInfo lines newInfo">{{item.order_address}}</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<empty v-if='!reserveList.length' type='1' cat='4' :msg='msg'></empty>
		<!-- 自定义表单详情 -->
		<view v-if='reserveList && reserveList.length == 1'>
			<formList :ids='reserveList' info='true' ref='childForm' barTitle='0'></formList>

			<view class="my-record thmeBg flexac" @click="handleShare">
				<text class="iconfont icon-fenxiang size32 white"></text>
			</view>
		</view>

		<tabBar :tab="6"></tabBar>
		<showModel @cancelFunc='showModal = false' v-if='showModal' type='2'></showModel>
		<SharePoster v-if='showShareQr' :myid='ordId' type='8' :pageType='"16&gid="+ordId' @closePoster='showShareQr=false'></SharePoster>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import formList from '../../components/form1.vue'
	import SharePoster from "@/components/sharePoster.vue"
	let that
	export default {
		
		components: {
			formList,
			SharePoster
		},
		data() {
			return {
				reserveList:'',
				staticUrl: this.staticUrl,
				showFormList: false, // 是否显示自定义表单
				msg:'',
				showModal: false,
				ordId: '',
				showShareQr: false
			}
		},
		onLoad() {
			this.getList();
		},
		methods:{
			getList(){	//获取用户id
				let that = this;
				that.$http.post({
					url: '/SRA_CustomerForm/customFormList',
					data: {
						page: 1, //页码
						size: 999, //每页展示文章的数量
					}
				}).then(res => {
					if(res.code == 100){
						if(res.data && res.data.length > 0){
							that.reserveList = res.data
							that.ordId = that.reserveList[0].order_id
						}else{
							that.reserveList = ''
							that.msg = '没有相关的表单配置哦'
						}
					}else{
						
						that.msg = res.msg
					}
				})
			},
			handleShare(){ // 分享海报
				if(!this.vid) return this.showModal = true
				this.showShareQr = true
			}
		},
		computed:{
			...mapState(['tabTitle','vid','share','navHeight','System','color'])
		},
		onShareAppMessage(res) {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		},
	}
</script>

<style lang="scss" scoped>
.loadig_img{
		width: 180upx;
		height: 180upx;
		display: block;
		margin: 100upx auto 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.page{
		background-color: #FFFFFF;
		&.minH{
			min-height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
		}
	}
	/* 预约 */
	.reserve_{padding: 36rpx;}
	.reserveImg{width: 130rpx;height: 130rpx;margin-right: 20rpx;}
	.icon-riqixuanxiang_huaban1{font-size: 24rpx;margin-right: 10rpx;}
	.icon-dizhi_huaban1{font-size: 26rpx;margin-right: 10rpx;}
	.reserve_ .underline{margin: 10rpx 0 22rpx;opacity: .7;}
	.reserveItem{margin: 30rpx 0 0;border-bottom: 1px solid #F2F2F2;padding-bottom: 30rpx;}
	.reserve_ .newTitle{font-size: 24rpx;}
	.reserveTitle{
		font-weight: bold;
		font-size: 30rpx;
	}

	.my-record{
		position: fixed;
		right: 0;
		height: 65upx;
		top: 340upx;
		border-radius: 30upx 0 0 30upx;
		padding: 4upx 10upx 4upx 26upx;
	}
</style>
